/**
 * Created by Administrator on 2019/7/2.
 */
var dt = [

    {
        name: '黄陂区',
        value: 100000,
        text: '案件数：54412<br/>案件金额：468452.35万'
    },

    {
        name: '新洲区',
        value: 40000,
        text: '"案件数：32412'
    },

    {
        name: '东西湖区',
        value: 3000,
        text: '"案件数：22412'
    },

    {
        name: '江岸区',
        value: 1000,
        text: '"案件数：42412'
    },

    {
        name: '青山区',
        value: 20000,
        text: '"案件数：52412'
    },

    {
        name: '硚口区',
        value: 9000,
        text: '"案件数：72412'
    },

    {
        name: '江汉区',
        value: 25000,
        text: '"案件数：82412'
    },

    {
        name: '洪山区',
        value: 30000,
        text: '"案件数：6412'
    },

    {
        name: '汉阳区',
        value: 28000,
        text: '"案件数：3412'
    },

    {
        name: '武昌区',
        value: 35000,
        text: '"案件数：66412'
    },

    {
        name: '蔡甸区',
        value: 40000,
        text: '"案件数：66412'
    },

    {
        name: '汉南区',
        value: 20000,
        text: '"案件数：66412'
    },

    {
        name: '江夏区',
        value: 200,
        text: '"案件数：66412'
    }

];

var dt2 = [

    {
        name: '黄陂区',
        value: 100000,
        text: '案件数：54412<br/>案件金额：468452.35万'
    },

    {
        name: '新洲区',
        value: 40000,
        text: '"案件数：32412'
    },

    {
        name: '东西湖区',
        value: 3000,
        text: '"案件数：22412'
    },

    {
        name: '江岸区',
        value: 1000,
        text: '"案件数：42412'
    },

    {
        name: '青山区',
        value: 20000,
        text: '"案件数：52412'
    },

    {
        name: '硚口区',
        value: 9000,
        text: '"案件数：72412'
    },

    {
        name: '江汉区',
        value: 25000,
        text: '"案件数：82412'
    },

    {
        name: '洪山区',
        value: 30000,
        text: '"案件数：6412'
    },

    {
        name: '汉阳区',
        value: 28000,
        text: '"案件数：3412'
    },

    {
        name: '武昌区',
        value: 35000,
        text: '"案件数：66412'
    },

    {
        name: '蔡甸区',
        value: 40000,
        text: '"案件数：66412'
    },

    {
        name: '汉南区',
        value: 20000,
        text: '"案件数：66412'
    },

    {
        name: '江夏区',
        value: 200,
        text: '"案件数：66412'
    }

];

//防火预警信息
var noticeList=[
    {
        name:'市局',
        list:[
            { time:'2019.05.06', data:'洪山区九峰山森林公园突发火情洪山区九峰山森林公园突发火情，人员伤亡未知。'},
            { time:'2019.05.06', data:'洪山区九峰山森林公园突发火情，人员伤亡未知。'},
            { time:'2019.05.06', data:'洪山区九峰山森林公园突发火情，人员伤亡未知。'},
            { time:'2019.05.06', data:'洪山区九峰山森林公园突发火情洪山区九峰山森林公园突发火情，人员伤亡未知。'},
            { time:'2019.05.06', data:'洪山区九峰山森林公园突发火情，人员伤亡未知。'},
            { time:'2019.05.06', data:'洪山区九峰山森林公园突发火情，人员伤亡未知。'},
            { time:'2019.05.06', data:'洪山区九峰山森林公园突发火情，人员伤亡未知。'},
            { time:'2019.05.06', data:'洪山区九峰山森林公园突发火情，人员伤亡未知。'}
        ]
    },
    {
        name:'江夏区',
        list:[
            { time:'2019.05.06', data:'江夏区九峰山森林公园突发火情，人员伤亡未知。'},
            { time:'2019.05.06', data:'江夏区九峰山森林公园突发火情，人员伤亡未知。'},
            { time:'2019.05.06', data:'江夏区九峰山森林公园突发火情，人员伤亡未知。'},
            { time:'2019.05.06', data:'江夏区九峰山森林公园突发火情，人员伤亡未知。'},
            { time:'2019.05.06', data:'江夏区九峰山森林公园突发火情，人员伤亡未知。'},
            { time:'2019.05.06', data:'江夏区九峰山森林公园突发火情，人员伤亡未知。'},
            { time:'2019.05.06', data:'江夏区九峰山森林公园突发火情，人员伤亡未知。'},
            { time:'2019.05.06', data:'江夏区九峰山森林公园突发火情，人员伤亡未知。'}
        ]
    },
    {
        name:'蔡甸区',
        list:[
            { time:'2019.05.06', data:'蔡甸区九峰山森林公园突发火情，人员伤亡未知。'},
            { time:'2019.05.06', data:'蔡甸区九峰山森林公园突发火情，人员伤亡未知。'},
            { time:'2019.05.06', data:'蔡甸区九峰山森林公园突发火情，人员伤亡未知。'},
            { time:'2019.05.06', data:'蔡甸区九峰山森林公园突发火情，人员伤亡未知。'},
            { time:'2019.05.06', data:'蔡甸区九峰山森林公园突发火情，人员伤亡未知。'},
            { time:'2019.05.06', data:'蔡甸区九峰山森林公园突发火情，人员伤亡未知。'},
            { time:'2019.05.06', data:'蔡甸区九峰山森林公园突发火情，人员伤亡未知。'},
            { time:'2019.05.06', data:'蔡甸区九峰山森林公园突发火情，人员伤亡未知。'}
        ]
    },
    {
        name:'黄陂区',
        list:[
            { time:'2019.05.06', data:'黄陂区九峰山森林公园突发火情，人员伤亡未知。'},
            { time:'2019.05.06', data:'黄陂区九峰山森林公园突发火情，人员伤亡未知。'},
            { time:'2019.05.06', data:'黄陂区九峰山森林公园突发火情，人员伤亡未知。'},
            { time:'2019.05.06', data:'黄陂区九峰山森林公园突发火情，人员伤亡未知。'},
            { time:'2019.05.06', data:'黄陂区九峰山森林公园突发火情，人员伤亡未知。'},
            { time:'2019.05.06', data:'黄陂区九峰山森林公园突发火情，人员伤亡未知。'},
            { time:'2019.05.06', data:'黄陂区九峰山森林公园突发火情，人员伤亡未知。'},
            { time:'2019.05.06', data:'黄陂区九峰山森林公园突发火情，人员伤亡未知。'}
        ]
    },
    {
        name:'新洲区',
        list:[
            { time:'2019.05.06', data:'新洲区九峰山森林公园突发火情，人员伤亡未知。'},
            { time:'2019.05.06', data:'新洲区九峰山森林公园突发火情，人员伤亡未知。'},
            { time:'2019.05.06', data:'新洲区九峰山森林公园突发火情，人员伤亡未知。'},
            { time:'2019.05.06', data:'新洲区九峰山森林公园突发火情，人员伤亡未知。'},
            { time:'2019.05.06', data:'新洲区九峰山森林公园突发火情，人员伤亡未知。'},
            { time:'2019.05.06', data:'新洲区九峰山森林公园突发火情，人员伤亡未知。'},
            { time:'2019.05.06', data:'新洲区九峰山森林公园突发火情，人员伤亡未知。'},
            { time:'2019.05.06', data:'新洲区九峰山森林公园突发火情，人员伤亡未知。'}
        ]
    }
];

var _option = {

    tooltip: {
        trigger: 'item',
        type: 'cross',
        /*   backgroundColor:"#ff7f50",//提示标签背景颜色
         textStyle:{color:"#fff"}, //提示标签字体颜色
         formatter:function(param){
         return dt[param.dataIndex].name + "<br />" +dt[param.dataIndex].text;
         } */
        alwaysShowContent: false,
        bordeRadius: 4,
        borderWidth: 1,
        borderColor: 'rgba(0,0,0,0.2)',
        backgroundColor: 'rgba(255,255,255,0.9)',
        padding: 0,

        // position: "top",

        textStyle: {
            fontSize: 12,
            color: '#333'
        },

        formatter: function(params) {
            var color = "#FFB84D";
            var a = "<div style='background-color:" + color + ";padding: 5px 10px;text-align:center;color:white;font-size: 16px;'>" + dt[params.dataIndex].name + "</div>";
            var num = Math.ceil(params.data.name[1].length / 10);
            a += "<div style='padding:3px;'>";
            for(var i = 0; i < num; i++) {
                a += dt[params.dataIndex].text + "<br>";
            }
            a += "</div>";
            return a;
        }
    },

    visualMap: {
        min: 800,
        max: 50000,
        textStyle: {
            color: '#ffffff'
        },
        text: ['High', 'Low'],
        x: 'left',
        y: 'center',
        realtime: false,
        calculable: true,
        inRange: {
            color: ['orange', 'yellow', 'green']
        }

    },

    series: [{
        name: '宁波',
        type: 'map',
        map: 'ningbo',
        // symbol:'../images/shine.jpg',
        //  symbolSize: 41,
        roam: true,
        label: {
            normal: {
                show: true
            },
            emphasis: {
                show: true
            }
        },
        layoutCenter: ['50%', '50%'], //属性定义地图中心在屏幕中的位置，一般结合layoutSize 定义地图的大小

        //layoutSize: 11200,
        itemStyle: {
            normal: {
                label: {
                    show: true
                }
            },
            emphasis: {
                label: {
                    show: true
                }
            }
        },
        data: dt
    }]
};

var _option2 = {

    tooltip: {
        trigger: 'item',
        type: 'cross',
        /*   backgroundColor:"#ff7f50",//提示标签背景颜色
         textStyle:{color:"#fff"}, //提示标签字体颜色
         formatter:function(param){
         return dt[param.dataIndex].name + "<br />" +dt[param.dataIndex].text;
         } */
        alwaysShowContent: false,
        bordeRadius: 4,
        borderWidth: 1,
        borderColor: 'rgba(0,0,0,0.2)',
        backgroundColor: 'rgba(255,255,255,0.9)',
        padding: 0,
        // position: "top",
        textStyle: {
            fontSize: 12,
            color: '#333'
        },

        formatter: function(params) {
            var color = "#FFB84D";
            var a = "<div style='background-color:" + color + ";padding: 5px 10px;text-align:center;color:white;font-size: 16px;'>" + dt2[params.dataIndex].name + "</div>";
            var num = Math.ceil(params.data.name[1].length / 10);
            a += "<div style='padding:3px;'>";
            for(var i = 0; i < num; i++) {
                a += dt2[params.dataIndex].text + "<br>";
            }
            a += "</div>";
            return a;
        }
    },

    visualMap: {
        min: 800,
        max: 50000,
        textStyle: {
            color: '#ffffff'
        },
        text: ['High', 'Low'],
        x: 'left',
        y: 'center',
        realtime: false,
        calculable: true,
        inRange: {
            color: ['orange', 'yellow', 'green']
        }

    },

    series: [{
        name: '宁波',
        type: 'map',
        map: 'ningbo',
        // symbol:'../images/shine.jpg',
        //  symbolSize: 41,
        roam: true,
        label: {
            normal: {
                show: true
            },
            emphasis: {
                show: true
            }
        },
        layoutCenter: ['50%', '50%'], //属性定义地图中心在屏幕中的位置，一般结合layoutSize 定义地图的大小

        //            layoutSize: 11200,
        itemStyle: {
            normal: {
                label: {
                    show: true
                }
            },
            emphasis: {
                label: {
                    show: true
                }
            }
        },
        data: dt2
    }]
};

var chart = null
var chart2 = null

$(function() {
    var chart_item = 550;
    var b_h = 250;
    var m_h = 189;
    var mb = 12;
    var h = b_h * 3 + 3 * mb + m_h;
    var bp = b_h / h;
    var mp = m_h / h;
    var mbp = mb / h
    var bwhp = chart_item / b_h
    var json = null;

    function getJSON(cb) {
        if(json) {
            cb && cb(json)
        } else {
            $.get('js/wuhan.json', function(res_json) {
                json = res_json
                cb && cb(json)
            });
        }
    }
    function resize() {
        var boxh = $('.chart_list').height();
        var boxw = $('.chart_box').width();

        var mapW = boxw - (boxh * bp / 250 * 550) * 2 - 100;

        $('.map_box').css({
            width: mapW
        });
        $('.chart_list').css({
            width: boxh * bp * bwhp
        });
        $('.chart_item.z-b').css({
            height: boxh * bp,
            marginBottom: boxh * mbp
        });
        $('.chart_item.z-m').css({
            height: boxh * mp
        });
    }
    //notice_list
    function ScrollImgLeft(dom){
        var speed=50;
        var scroll_div = $(dom).find(".scroll_div");
        var scroll_begin = $(dom).find(".scroll_begin");
        var scroll_end = $(dom).find(".scroll_end");
        var left=scroll_div.scrollLeft();
        var width=scroll_begin.outerWidth(true);
        var dwidth=scroll_div.outerWidth(true);

        console.log(width,dwidth)

        function Marquee(){
            if(left>width){
                left=0;
            }else{
                scroll_div.scrollLeft(left++);
            }
        }
        if(width>dwidth){
            scroll_end.html(scroll_begin.html());
            var timer=setInterval(Marquee,speed);
        }
    }
    function initNotice(){
        var noticeModel='';
        noticeList.forEach(function(v){
            if(v.name=='市局'){
                v.list.forEach(function(t){
                    noticeModel+='<li><div class="scroll_div"><div class="scroll_begin"><b>'+t.time+'</b><span>'+t.data+'</span></div> <div class="scroll_end"></div> </div></li>';
                })
                $(".notice_list").html(noticeModel);
                ScrollImgLeft(".notice_list li");
            }
        })
    }

    resize()
    getJSON(function(json) {
        chart = echarts.init(document.getElementById('chart07'));
        echarts.registerMap('ningbo', json);
        chart.setOption(_option);
        chart.on('click', function (params) {
            console.log(params.data.name)
            var city=params.data.name;
            var index = noticeList.findIndex(function(item){
                return item.name===city
            })
            if(index==-1){
                myChart8.setOption(option8);
                $(".chart_area span").html('武汉市');
            }else{
                Data8.forEach(function(v){
                    if(v.name==city){
                        $(".chart_area span").html(city);
                        option08.series[0].data=v.data1;
                        console.log(option08)
                        myChart8.clear();
                        myChart8.setOption(option08);
                    }
                })
            }
        })

        chart2 = echarts.init(document.getElementById('chart17'));
        echarts.registerMap('ningbo', json);
        chart2.setOption(_option2);

        chart2.on('click', function (params) {
            console.log(params.data.name)
            var city=params.data.name;
            var noticeModel='';
            //var index = noticeList.findIndex(item => item.id===city)
            var index = noticeList.findIndex(function(item){
                return item.name===city
            })
            console.log(index)
            if(index==-1){
                initNotice();
            }else{
                noticeList.forEach(function(v){
                    if(v.name==city){
                        v.list.forEach(function(t){
                            noticeModel+='<li><div class="scroll_div"><div class="scroll_begin"><b>'+t.time+'</b><span>'+t.data+'</span></div> <div class="scroll_end"></div> </div></li>';
                        })
                        $(".notice_list").html(noticeModel);
                        ScrollImgLeft(".notice_list li");
                    }
                })
            }
        })
    })


    $(".select_ul li").on('click',function(){
        var _idx=$(this).index();
        $('.cockpit_tab .cockpit_contain').eq(_idx).addClass("active").siblings().removeClass("active");
        if(_idx==1){
            initNotice();
        }
    })

    $(window).resize(function() {
        resize();
        chart && chart.resize();
        chart2 && chart2.resize();
    })

})